<template>
    <div style="height: 90%;width: 100%;">
        <div class="title">
        <van-cell-group style="display:flex">
            <van-field v-model="newData.title" label="文章标题" placeholder="请输入文章标题"  style="width: 70%;" />
            <van-dropdown-menu style="width: 50%;" >
                <van-dropdown-item v-model="newData.cid" :options="option"   />
                <van-button type="info"  @click="newDataGet">提交</van-button>
            </van-dropdown-menu>

        </van-cell-group>
        </div>
        <div style="height: 90%;width: 100%;">
            <mavon-editor
            style="height: 100%;width: 100%;"
            v-model="newData.content"
            @imgAdd="$imgAdd"
            @change="change"
            :toolbars="toolbars"
            >
            </mavon-editor>
        </div>

    </div>
</template>
<script>
import { Field, Cell, CellGroup, Button, DropdownMenu, DropdownItem } from 'vant';
import axios from 'axios';
import { cate } from 'api/article'
import { throttle, debounce } from '@/utils/Methods.js';
export default {
        components: {
            [Field.name]: Field,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Button.name]: Button,
            [DropdownMenu.name]: DropdownMenu,
            [DropdownItem.name]: DropdownItem,
        },
        data() {
            return {
                    newData: { content: '', title: '', cid: '5e98551cc375e05f9c14ecb9' },
                    value: 1,
                    switch1: false,
                    switch2: false,
                    option: [

                    ],
                    toolbars: {
                        header: true, // 标题
                         ol: true, // 有序列表
                        ul: true, // 无序列表
                        link: true, // 链接
                        imagelink: true, // 图片链接
                        code: true, // code
                        table: true, // 表格
                        fullscreen: true, // 全屏编辑
                        readmodel: true, // 沉浸式阅读
                    }
            }
        },
        created() {
                this.change = debounce(this.change, 2000);
                this.newDataGet = throttle(this.newDataGet, 1000)
                this.getList()
        },
        methods: {
            async getList() {
                var data = await cate();
                data.forEach((element, index) => {
                    this.option.push({ text: element.title, value: element._id })
                });
            },
            onConfirm() {
            this.$refs.item.toggle();
            },
            $imgAdd(pos, file) {
                console.log('开始上传');

                let formdata = new FormData();
                formdata.append('test', file);
                console.log(pos, file);

                console.log(formdata);

                // http://123.56.85.24:5000/static/img/HS.jpg
                // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
                axios({
                    url: 'http://123.56.85.24:5000/upload/img',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then(url => {
                    this.$refs.md.$img2Url(pos, 'http://123.56.85.24:5000/static/' + url.data.data);
                }).catch(err => console.log(err)
                );
            },
            change(h, r) {
                // render 为 markdown 解析后的结果
                this.newData.content = r
            },
            newDataGet() {
                console.log(this.newData);
            }
},
}
</script>
<style lang="scss" scoped>
.title{
    text-align: center;
}
.v-note-wrapper{
    z-index: 1;
}
</style>
